<template>
	<view class="wen">
		<view class="box_bottom">
			<view class="bottom_w">
				<image src="../../static/k5.png" mode=""></image>
			</view>
			<view class="bottom_w1 flex">
				<p>问题类型</p>
				<p class="s" @click="open()">请选择></p>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false" class="box" maskClick="true">
			<view class="box1">
				<p>其他问题反馈</p>
			</view>
		</uni-popup>
		<view class="two">
			<view class="wen_two">
			<p>问题描述</p>
			<view class="textareas">
				<textarea id="PPP" placeholder="您填写的信息越全,问题越可有效解决呦~" class="act_textarea" maxlength="2000"
					@input="descInput($event)" data-model="desc" />
				<view class="show_number">
					{{remnant}}/500
				</view>
			</view>

		</view>
		</view>
		
		<view class="wen_three">
			<p>上传凭证</p>
			<view class="xj">
				<image src="../../static/x.png" mode=""></image>
			</view>
			<p class="h">请上传照片凭证</p>
		</view>
		<view class="four flex">
			<p>联系方式<span>*</span></p>
			<p>155******76</p>
		</view>
		<view class="buts">
			<button>确认提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xuanzhong: '1',
				remnant: "0"
			}
		},
		onReady() {},
		methods: {
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			descInput: function(e) {
				console.log(e)
				this.remnant = e.detail.cursor
			},

		}
	}
</script>

<style>
	.flex {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.box_bottom {
		background-color: #fff;
		width: 100%;
		padding: 20rpx;
		margin: 10rpx auto;
	}

	.bottom_w {
		width:90%;
		padding: 20rpx 10rpx;
		border-bottom: #ccc 1px solid;
		font-size: 18px;
	}

	.bottom_w image {
		width: 30px;
		height: 30px;
		position: relative;
		right: -280px;
	}

	.bottom_w1 {
		width: 90%;
		padding: 20rpx 10rpx;
		margin: 0 auto;
		font-size: 18px;
	}

	.but button {
		background-color: #f00;
		color: #fff;
		width: 92%;
		margin: 20rpx auto;
	}

	.s {
		color: #999;
		font-size: 16px;
	}

	.box1 {
		background-color: #fff;
	}

	.box image {
		width: 30px;
		height: 30px;
	}

	.wen_two {
		background-color: #fff;
		width: 100%;
		padding: 20rpx;
		margin: 0 auto;
		overflow: auto;
	}

	.wen_two .textareas {
		border: #999 1px solid;
		width: 350px;
	}

	.show_number {
		text-align: right;
	}
	.wen_three{background-color: #fff;width:100%;padding:20rpx;}
	.xj{background-color: #ccc;width:20%;text-align: center;height:60px;padding:10rpx;margin:10rpx 0;}
	.xj image{width:50px;height:50px;}
	.h{color:#ccc;font-size:13px;}
	.four{background-color: #fff;padding:20rpx;margin:20rpx 0;}
	.four span{color: #f00;}
	.buts{margin:100rpx 0;}
	.buts button{background-color: #f00;color: #fff;}
</style>
